/*顶部下拉出现隐藏顶部*/
window.addEventListener("scroll", function () {
    let Top = document.querySelector(".cartMain").offsetTop;
    if (document.documentElement.scrollTop >= Top) {
        document.querySelector(".headerHidden").style.top = "0px";
        document.querySelector(".headerHidden").style.transition = 'all .3s'
    } else {
        document.querySelector(".headerHidden").style.top = "-80px";
        document.querySelector(".headerHidden").style.transition = 'none'
    }
});

// 使用数组渲染界面
// 控制tr的自定义属性变量

let data = [
    {
        id: 1,
        bind: 1,
        src: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        title: '智能宠物喂食器mini',
        model: '颜色:绿白条 尺码:120cm ',
        price: 14.9,
        count: 1,
        hard: true
    },
    {
        id: 2,
        bind: 2,
        src: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg',
        title: '网易云音乐氧气运动蓝牙耳机一键收藏歌曲',
        model: '规格:猪肘330g*1袋 ',
        price: 188,
        count: 1,
        hard: true

    }, {
        id: 3,
        bind: 3,
        src: 'https://yanxuan-item.nosdn.127.net/a078d2c4b8559b0a54430a0dc6460095.jpg',
        title: '书源彩色按动中性笔',
        model: '颜色:栗色 尺码:35 ',
        price: 16.9,
        count: 1,
        hard: true
    }
]
// 将购物车的信息本地存储
localStorage.setItem('carts', JSON.stringify(data))

// 将本地信息拿出
let arr1 = JSON.parse(localStorage.getItem('carts'))

const tbody = document.querySelector('tbody')

// 页面渲染函数

// 小选框变量
let trs = 0
// 增加的变量
let trs1 = 0
// 减少的变量
let trs2 = 0
function renderNew(newArr) {
    trs = 0
    trs1 = 0
    trs2 = 0
    const str = newArr.map(function (item) {
        const { src, title, model, model1, price, count, bind } = item
        return `
        <tr class="goodsInfo">
                    <td>
                        <div>
                        <a href="javascript:;" class="allIcon" data-recog="${bind}" data-recog1="${trs++}">
                            <i class="el-icon-circle-check"></i>
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="cartGoods">
                            <a href="javascript:;" class="goodsPic">
                                <img src="${src}"
                                    alt="">
                            </a>
                            <div class="goodsRight">
                                <p>${title}</p>
                                <a href="javascript:;" class="goodsColor">
                                    <div class="goodsItem">
                                        <span class="itemSpan">${model}</span>
                                        <i>></i>
                                    </div>
                                    <div class="renderBig"></div>
                                </a>
                            </div>
                        </div>
                    </td>
                    <td>
                        <p>￥${price.toFixed(2)}</p>
                    </td>
                    <td>
                        <div class="numberBig">
                            <div class="goodsNumber">
                                <a href="javascript:;" class="reduces" data-lessen="${bind}" data-lessen1="${trs1++}"" >-</a>
                                <input type="text" value="${count}" class="inputNum">
                                <a href="javascript:;" class="goodSAdd" data-nums="${bind}" data-nums1="${trs2++}">+</a>
                            </div>
                        </div>

                    </td>
                    <td>
                        <p class="count">￥${(price * count).toFixed(2)}</p>
                    </td>
                    <td>
                        <p><a href="javascript:;">移入收藏夹</a></p>
                        <p><a href="javascript:;" class="deleteHint" data-handle1="${bind}">删除</a></p>
                        <p><a href="javascript:;">找相似</a></p>
                    </td>
                </tr>`
    }).join('')
    tbody.innerHTML = str
}

// 初始化页面渲染

renderNew(arr1)


// 页面初始化，显示的商品总价  总数
const totalGoods = document.querySelector('.totalGoods')
const goodsUncheck = document.querySelector('.goodsUncheck')
const goodsCheck = document.querySelector('.goodsCheck')
figure()

// 页面初始化，共选商品个数
goodsCheck.innerHTML = '0'

// 小计函数封装
function natrue(footing3) {
    const count = document.querySelectorAll('.count')
    count[natrue4].innerHTML = `￥${footing3.toFixed(2)}`
}

// 隐藏盒子动态生成
function modelBox(title, mark) {
    this.title = title
    this.mark = mark
}

const m1 = new modelBox('亲，您是否确认删除商品', 'mark0')
const m2 = new modelBox('亲，您是否确认删除选中的商品', 'mark1')
const m6 = new modelBox('亲，您是否确认删除失效的商品')

// 判断删除标记变量
let markStr = null
modelBox.prototype.show = function () {
    const div = document.createElement('div')
    div.className = 'deleteBig'
    div.innerHTML = `
    <div class="deleteOne">
        <div class="deleteTwo">
            <div class="marked">
                <h3>温馨提示</h3>
                <a href="javascript:;" ><i class="deleteOff">X</i></a>
            </div>
            <div class="deleteBody">
                <i class="el-icon-warning"></i>
                <span>${this.title}</span>
            </div>
            <div class="deleteFooter">
                <button class="buttonOne">取消</button>
                <button class="buttonTwo">确认</button>
            </div>
        </div>
    </div>`
    document.querySelector('.delineBox').appendChild(div)
    markStr = this.mark
}


// 表格事件委托
// 删除全局变量
let handleEach = null
// 数量框全局变量
let num11 = null
let num12 = null
// 小计全局变量
let natrue4 = null

const inputNum = document.querySelectorAll('.inputNum')

// 事件委托
tbody.addEventListener('click', function (e) {

    // 删除功能
    if (e.target.className === 'deleteHint') {
        // 删除对应ID商品
        // 隐藏盒子出现
        m1.show()
        handleEach = e.target.dataset.handle1
    }


    // 小按钮功能
    if (e.target.parentNode.className === 'allIcon') {

        // 小按钮选中
        if (arr1[(e.target.parentNode.dataset.recog1)].hard === true) {
            pitch(e.target.parentNode)
            arr1[(e.target.parentNode.dataset.recog1)].hard = false
        } else {
            unpitch(e.target.parentNode)
            arr1[(e.target.parentNode.dataset.recog1)].hard = true
        }

        // 小按钮选中 上下都选中
        if (sense(arr1) == false) {
            // 表头选中
            pitch(checkAll1)
            flag1 = false
            // 删除商品选中
            pitch(checkAll2)
            flag2 = flag1
        } else {
            // 表头未选中
            unpitch(checkAll1)
            flag1 = true
            // 删除商品未选中
            unpitch(checkAll2)
            flag2 = flag1
        }

        // 已选中商品渲染
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

        // 商品总量 总价
        figure()
    }


    // 数量增加
    if (e.target.className === 'goodSAdd') {
        // 数量增加
        num11 = ++e.target.previousElementSibling.value
        arr1[e.target.dataset.nums1].count = num11

        // 商品总量 总价
        figure()

        // 小计
        natrue4 = (e.target.dataset.nums1)
        let nature1 = arr1[(e.target.dataset.nums1)].count * arr1[(e.target.dataset.nums1)].price
        natrue(nature1)
        // 已选中商品渲染
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)
    }

    if (e.target.className === 'reduces') {
        // 数量减少

        e.target.nextElementSibling.value--
        num12 = e.target.nextElementSibling.value
        arr1[e.target.dataset.lessen1].count = num12

        if (arr1[e.target.dataset.lessen1].count <= 1) {
            e.target.nextElementSibling.value = 1
            arr1[e.target.dataset.lessen1].count = 1
        }

        // 商品总价 总数
        figure()

        // 小计
        natrue4 = (e.target.dataset.lessen1)
        let nature1 = arr1[(e.target.dataset.lessen1)].count * arr1[(e.target.dataset.lessen1)].price
        natrue(nature1)

        // 已选中商品渲染
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

    }
})

// 封装计算商品函数
function figure() {
    // 商品总数
    let strAdd = arr1.reduce(function (prev, item) {
        return prev + (+item.count)
    }, 0)

    // 商品总计
    let totalStr = arr1.reduce(function (prev, item) {
        return prev + (item.count * item.price)
    }, 0)

    goodsUncheck.innerHTML = strAdd
    totalGoods.innerHTML = `¥${totalStr.toFixed(2)}`
}

// 封装小按钮判断函数
function sense(arr1) {
    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i].hard == true) {
            return true
        }
    }
    return false

}

// 封装已选中商品函数
function count12(arr1) {
    let sum = 0
    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i].hard == false) {
            sum += +arr1[i].count
        }
    }
    return sum
}
// 点击删除商品 已勾选商品删除
document.querySelector('.goodsDelete').addEventListener('click', function () {
    // 盒子出现
    m2.show()
})

// 点击清空失效商品商品
document.querySelector('.goodsDark').addEventListener('click', function () {
    m6.show()
})



// 删除事件委托
const delineBox = document.querySelector('.delineBox')
delineBox.addEventListener('click', function (e) {
    // 点击X号 盒子消失
    if (e.target.className === 'deleteOff') {
        document.querySelector('.delineBox').innerHTML = ''
    }
    // 点击取消 盒子消失
    if (e.target.className === 'buttonOne') {
        document.querySelector('.delineBox').innerHTML = ''
    }
    // 点击确定
    if (e.target.className === 'buttonTwo') {
        // 盒子消失
        document.querySelector('.delineBox').innerHTML = ''

        //  判断 删除商品 还是 删除
        // 删除
        if (markStr === 'mark0') {
            // 删除  
            const arr2 = arr1.filter(function (item) {
                return item.id != handleEach
            })
            arr1 = arr2
            renderNew(arr1)
            localStorage.setItem('carts', JSON.stringify(arr1))

            // 商品总数 总计
            figure()

            // 已选中商品
            document.querySelector('.goodsCheck').innerHTML = count12(arr1)

            // 购物车无商品
            cartPoor()

            // 全选禁用
            unpitch(checkAll1)
            unpitch(checkAll2)

        } else {
            // 删除商品 
            const arr3 = arr1.filter(function (item) {
                return item.hard != false
            })

            arr1 = arr3
            renderNew(arr1)
            localStorage.setItem('carts', JSON.stringify(arr1))

            // 商品总数 总计
            figure()

            // 已选中商品
            document.querySelector('.goodsCheck').innerHTML = count12(arr1)

            // 购物车无商品
            cartPoor()
            // 全选禁用
            unpitch(checkAll1)
            unpitch(checkAll2)

        }
    }
})


// 封装选中函数
function pitch(checkes) {
    if (checkes.querySelector('span')) {
        checkes.querySelector('span').style.color = '#27ba9b'
    }
    checkes.querySelector('i').classList.remove('el-icon-circle-check')
    checkes.querySelector('i').classList.add('el-icon-success')
    checkes.querySelector('i').style.color = '#27ba9b'
}


// 封装未选中函数
function unpitch(checkes1) {
    if (checkes1.querySelector('span')) {
        checkes1.querySelector('span').style.color = '#999999'
    }
    checkes1.querySelector('i').classList.remove('el-icon-success')
    checkes1.querySelector('i').classList.add('el-icon-circle-check')
    checkes1.querySelector('i').style.color = '#999999'
}

// 封装购物车无商品函数
function cartPoor() {
    if (arr1.length === 0) {
        tbody.innerHTML = `
        <tr class="cartPoor">
            <td colspan="6">
                <div class="cartEmpty">
                    <img src="../images/jixiaoqian.png" alt="">
                    <p>购物车内暂时没有商品</p>
                    <div class="cartStroll">
                    <button class="strollBtn"> <a href="../index.html">继续逛逛</a> </button>
                    </div>
                </div>
            </td>
        </tr>`
    }
}

// 表头全选按钮
let flag1 = true
let flag2 = true

// 小按钮选中封装
function small() {
    const allIcon = document.querySelectorAll('.allIcon')
    for (let i = 0; i < allIcon.length; i++) {
        pitch(allIcon[i])
        arr1[i].hard = false
    }

}

// 小按钮未选中封装
function unsmall() {
    const allIcon = document.querySelectorAll('.allIcon')
    for (let i = 0; i < allIcon.length; i++) {
        unpitch(allIcon[i])
        arr1[i].hard = true
    }

}

// 表头全选
const checkAll1 = document.querySelector('.checkAll1')
const allIcon = document.querySelectorAll('.allIcon')
checkAll1.addEventListener('click', function () {
    if (flag1) {
        // 自己选中
        pitch(checkAll1)
        flag1 = false

        // 下单结算选中
        pitch(checkAll2)
        flag2 = flag1

        // 小按钮选中
        small()

        // 已选中商品
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

        // 商品总数 总计
        figure()
    } else {
        // 自己未选中
        unpitch(checkAll1)
        flag1 = true

        // 下单结算未选中
        unpitch(checkAll2)
        flag2 = flag1

        // 小按钮未选中
        unsmall()

        // 已选中商品
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

        // 商品总计 总数
        figure()
    }
})

// 下单结算按钮全选
const checkAll2 = document.querySelector('.checkAll2')
checkAll2.addEventListener('click', function () {
    if (flag2) {
        // 自己选中
        pitch(checkAll2)
        flag2 = false

        // 表头选中
        pitch(checkAll1)
        flag1 = flag2
        // 小按钮选中
        small()

        // 已选中商品
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

        // 商品总数 总计
        figure()

    } else {
        // 自己未选中
        unpitch(checkAll2)
        flag2 = true

        // 表头未选中
        unpitch(checkAll1)
        flag1 = flag2

        // 小按钮未选中
        unsmall()

        // 已选中商品
        document.querySelector('.goodsCheck').innerHTML = count12(arr1)

        // 商品总计 总数
        figure()
    }
})


// 点击规格 弹出规格选择框

const model = [{
    src1: 'https://yanxuan-item.nosdn.127.net/3c9de717f0e906481b61e9638bb3d1b1.png',
    src2: 'https://yanxuan-item.nosdn.127.net/c6cd86460cb22b5d8a68656ae28ba148.jpg',
    title1: '骑士黑',
    title2: '深灰',
    totalSize: 39
},
{
    src1: '	https://yanxuan-item.nosdn.127.net/057245681c7411e6aa1a8e89e032c9f7.png',
    title1: '礼盒款（红色无礼袋）',
    src2: 'https://yanxuan-item.nosdn.127.net/ba804bdb64653b496899a569118ee325.png',
    title2: '礼盒款（蓝色无礼袋）'
}, {
    src1: '	https://yanxuan-item.nosdn.127.net/2f6f21e8e074a0e05e3f5657ea222cf0.png',
    src2: 'https://yanxuan-item.nosdn.127.net/7006961f0c1a746b5e3af433b7b446cf.png',
    title1: '黄白条',
    title2: '粉白条',
    totalSize: 39
}]

const model3 = [{
    color: '颜色:绿白条',
    size: '尺码:120 '
},
{
    demel: '规格:猪肘330g*1袋 '
}, {
    color: '颜色:栗色',
    size: '尺码:35'
}]
function modelBox1(size, color) {
    this.size = size
    this.color = color
}

const m3 = new modelBox1('规格')
const m4 = new modelBox1('尺码', '颜色')


modelBox1.prototype.show = function () {
    if (this.size === '尺码') {
        document.querySelector('.renderBig').innerHTML = `
        <div class="goodsLayer" style="top:${(index * 121) + 42}px">
       <div class="goodsSku">
           <dl>
               <dt data-mark="marked1">${this.color}</dt>
               <dd  class="goodsDd">
                   <img src="${model[index].src1}" alt=""
                       title="${model[index].title1}" id="skuColor">
                   <img src="${model[index].src2}" alt=""
                       title="${model[index].title2}" >
               </dd>
           </dl>
           <dl>
               <dt>${this.size}</dt>
               <dd class="goodsDd">
                   <span id="skuColor">${model[index].totalSize}</span>
                   <span>${model[index].totalSize + 1}</span>
                   <span>${model[index].totalSize + 2}</span>
                   <span>${model[index].totalSize + 3}</span>
                   <span>${model[index].totalSize + 4}</span>
                   <span>${model[index].totalSize + 5}</span>
                   <span>${model[index].totalSize + 6}</span>
               </dd>
           </dl>
       </div>
       <button>确认</button>
   </div> `

    } else {
        document.querySelector('.renderBig').innerHTML = `
        <div class="goodsLayer" style="top:${(index * 121) + 42}px">
        <div class="goodsSku">
            <dl>
                <dt data-mark="marked2">规格</dt>
                <dd  class="goodsDd">
                    <img src="${model[index].src1}" alt=""
                        title="${model[index].title1}" id="skuColor">
                    <img src="${model[index].src2}" alt=""
                        title="${model[index].title2}">
                </dd>
            </dl>
        </div>
        <button>确认</button>
    </div>`
    }
}


const goodsColor = document.querySelectorAll('.goodsColor')

let index = 0
let page = 0
for (let i = 0; i < goodsColor.length; i++) {
    goodsColor[i].addEventListener('click', function (e) {
        page = i
        document.querySelector('.renderBig').innerHTML = ''
        document.querySelector('.renderBig').classList.remove('fader')
        e.stopPropagation()
        if (model3[i].demel) {
            index = i
            m3.show()
        }
        else {
            index = i
            m4.show()
        }

    })
}

// 图片的数据存储
let datas1 = null
// 尺码的数据存储
let datas2 = null


const renderBig = document.querySelector('.renderBig')
renderBig.addEventListener('click', function (event) {
    // 选中的图片选项添加高亮
    let imgs = document.querySelectorAll('.goodsSku dd img')
    let spans = document.querySelectorAll('.goodsSku dd span')
    event.stopPropagation();//阻止冒泡
    if (event.target.tagName === 'IMG') {
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].removeAttribute('id')
        }
        const att = document.createAttribute("id");
        att.value = "skuColor";
        event.target.setAttributeNode(att);
        datas1 = event.target.title
    }
    if (event.target.tagName === 'SPAN') {
        for (let i = 0; i < spans.length; i++) {
            spans[i].removeAttribute('id')
        }
        const att = document.createAttribute("id");
        att.value = "skuColor";
        event.target.setAttributeNode(att);
        datas2 = event.target.innerHTML
    }

    // 点击确认按钮，盒子消失，把数据渲染到A标签里
    if (event.target.tagName === 'BUTTON') {
        // 如果是规格，渲染规格
        // 颜色还是规格
        const nodes = event.target.previousElementSibling.children[0].children[0].dataset.mark
        const spans = document.querySelectorAll('.itemSpan')
        // 如果是规格
        if (nodes === 'marked2') {
            // 获取所有的span标签
            spans[page].innerHTML = datas1
        } else {
            // 如果是颜色
            spans[page].innerHTML = `颜色:${datas1} 尺码:${datas2} `
        }
        renderBig.classList.add('fader')
    }
})
// 点击其他地方，规格盒子消失
document.addEventListener('click', function () {
    renderBig.classList.add('fader');//隐藏
});

// 下单结算
document.querySelector('.paryMents').addEventListener('click', function () {
    if (arr1.length === 0) {
        document.querySelector('.cartWarn').classList.remove('fader1')
        setTimeout(function () {
            document.querySelector('.cartWarn').classList.add('fader1')
        }, 5000)
    } else {
        console.log('xixi')
        location.href = "./shoppingaddress.html"
    }
})







// 猜你喜欢
let roundDate = {
    "msg": "操作成功",
    "result": {
        "counts": 304, "pageSize": 20, "pages": 16, "page": 1,
        "items":
            [
                { "id": "3995195", "name": "毛茸茸暖意，儿童羊羔绒外套73-120cm", "desc": "宽松版型，搭出休闲风格", "price": "99.00", "picture": "https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg", "discount": null, "orderNum": 356 },
                { "id": "3997565", "name": "可机洗系列-女式尖头平底鞋", "desc": "解放双手，随盒赠送洗鞋袋", "price": "179.00", "picture": "https://yanxuan-item.nosdn.127.net/f5c2bd141d6640123532410bea6aecc2.png", "discount": null, "orderNum": 233 },
                { "id": "3989765", "name": "宜兴原矿紫砂壶茶具礼盒5件套", "desc": "纯正紫砂原矿料，百年经典器型", "price": "599.00", "picture": "https://yanxuan-item.nosdn.127.net/cec3c630e88787200095a8e11ee9942f.png", "discount": null, "orderNum": 167 },
                { "id": "3987192", "name": "PC膜拉链拉杆箱系列（17/20/24/28寸）", "desc": "磨砂高级质地，轻巧短途出行", "price": "206.00", "picture": "https://yanxuan-item.nosdn.127.net/8e1ee389d18a90fa00f338dc8534587a.png", "discount": null, "orderNum": 556 },
                { "id": "1418015", "name": "告别油腻解放双手，懒人抹布超值囤货装16卷", "desc": "16卷800节，用完即扔，洗碗打扫不脏手", "price": "176.00", "picture": "https://yanxuan-item.nosdn.127.net/52a8dfbbce131f621ef6d9d02476ed91.png", "discount": null, "orderNum": 151 },
                { "id": "1622006", "name": "网易智造冷暖轻薄汽车坐垫", "desc": "高速静音双风机设计|冷暖两用", "price": "249.00", "picture": "https://yanxuan-item.nosdn.127.net/e4cf5dc8a43d9d1336f4579ab8a72d70.png", "discount": null, "orderNum": 458 },
                { "id": "1622019", "name": "电动红酒开瓶器锂电池快充", "desc": "风靡美国，6S开瓶", "price": "129.00", "picture": "https://yanxuan-item.nosdn.127.net/4bfd44beec46454f55fd35f4dd8ae262.png", "discount": null, "orderNum": 233 },
                { "id": "3398019", "name": "祛味猫砂伴侣396克", "desc": "细腻粉末深入猫砂，强力祛味", "price": "49.00", "picture": "https://yanxuan-item.nosdn.127.net/95cb93ddb067b498327c9b7338a0af70.jpg", "discount": null, "orderNum": 268 },
                { "id": "3804045", "name": "男式经典切尔西商务正装鞋", "desc": "商务新经典，出众的脚感体验", "price": "444.00", "picture": "https://yanxuan-item.nosdn.127.net/94f800da40ffaf2633e1338a2cfbf54e.png", "discount": null, "orderNum": 156 },
                { "id": "3827035", "name": "拥有整个星空俄罗斯设计弦月流星项链", "desc": "一款项链九种戴法，浪漫星月设计", "price": "149.00", "picture": "https://yanxuan-item.nosdn.127.net/95d2b3d442b7208a5123164e1ff6c052.png", "discount": null, "orderNum": 156 },
                { "id": "1435014", "name": "原汁原味根根酥脆泰国香脆椰子卷16g*12", "desc": "泰国新鲜椰汁制作，根根酥脆", "price": "29.00", "picture": "https://yanxuan-item.nosdn.127.net/90cd2aeb3208a28c51a76111cd40e2d3.png", "discount": null, "orderNum": 190 },
                { "id": "3995192", "name": "毛茸茸小熊出没，儿童羊羔绒背心73-90cm", "desc": "连帽熊耳设计，萌化少女心", "price": "79.00", "picture": "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png", "discount": null, "orderNum": 144 },
                { "id": "3997532", "name": "“柿柿”如意，新年夹棉连体衣/棉服0-5岁", "desc": "三层锁温舒适，仿丝绵加倍保暖", "price": "159.00", "picture": "https://yanxuan-item.nosdn.127.net/3cb61b3fd4761555e56c4a5f19d1b4b1.png", "discount": null, "orderNum": 121 },
                { "id": "1524002", "name": "多功能环保除臭猫砂盆雾灰色", "desc": "封闭抽屉式设计，隔臭易清理", "price": "179.00", "picture": "https://yanxuan-item.nosdn.127.net/8f1ca43da72e151c66455310a143a77d.jpg", "discount": null, "orderNum": 151 },
                { "id": "1451027", "name": "净水花洒好搭档韩国花洒替换滤芯2只装", "desc": "适配除氯花洒，效果肉眼可见", "price": "49.00", "picture": "https://yanxuan-item.nosdn.127.net/eba436352816180993555d11fff87087.png", "discount": null, "orderNum": 84 },
                { "id": "3994896", "name": "冬季不怕冷，婴童加厚保暖爬服", "desc": "宝宝冬天不再冷，保暖常备单品", "price": "139.00", "picture": "https://yanxuan-item.nosdn.127.net/7170d6147878a099914b7bb7ce21773f.png", "discount": null, "orderNum": 292 }]
    }
}
let arr = roundDate.result.items
// 封装渲染函数
function render() {
    let ul = document.querySelector(".core ul")
    let start = 0
    let end = 4
    for (let i = 0; i < 4; i++) {
        let str = ''
        let li = document.createElement('li')
        let div = document.createElement("div")
        for (let j = start; j < end; j++) {
            str += `<a>
      <img src=${arr[j].picture} alt="">
       <p>${arr[j].name}</p>
       <p>¥${arr[j].price}</p>
        </a>`
        }
        start += 4
        end += 4
        div.innerHTML = str
        li.appendChild(div)
        ul.appendChild(li)
        ul.children[0].classList.add('fade')
    }

}
render()
// 按钮切换
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
let lis = document.querySelectorAll('.core ul li')
let spans1 = document.querySelectorAll('.indicator span')
let i = 0
next.addEventListener('click', () => {
    i++
    if (i > lis.length - 1) {
        i = 0
    }
    common()
})
prev.addEventListener('click', () => {
    i--
    if (i < 0) {
        i = lis.length - 1
    }
    common()
})
document.querySelector('.indicator').addEventListener('click', e => {
    if (e.target.tagName === 'SPAN') {
        i = e.target.id
        common()
    }
})
// 封装函数
function common() {
    document.querySelector('li.fade').classList.remove("fade")
    lis[i].classList.add('fade')
    document.querySelector('.indicator span.active').classList.remove("active")
    spans1[i].classList.add('active')
}






